<template>
    <el-card class="box-card" :body-style="{ padding: '8px 18px' }">
      <div slot="header" class="category-header">
        <span>{{cardHeader}}</span>
      </div>

      <ul class="category-list">
        <li v-for="a in articles" @click="view(a.id)" :style="itemStyle" :key="a.id" class="category-item"><a>{{a.title}}</a>
        </li>
      </ul>
<!--      <el-table
          :data="articles"
          style="width: 100%">
          <el-table-column
              prop="name"
              width="180">
          </el-table-column>


      </el-table>-->
    </el-card>
</template>

<script>
export default {
  name: "ArticleCard",
  props: {
    cardHeader: {
      type: String,
      required: true
    },
    articles: {
      type: Array,
      required: true
    },
    itemStyle: Object
  },
  methods: {
    view(id) {
      this.$router.push({path: `/article/view/${id}`});
    }
  }

}
</script>

<style scoped>
  .el-card{
    margin-bottom:30px;
  }
  .category-header {
    font-weight: 600;
  }

  .category-list {
    list-style-type: none;
  }

  .category-item {
    padding: 4px;
    font-size: 14px;
    color: #8690a6;
  }

</style>
